<div class="" id="app">
  <div class="flex items-center p2">
    <div style="flex: 1">
      <a href="javascript:history.go(-1)" class="weui-btn weui-btn_mini weui-btn_default"> 返回 </a>
    </div>
    <button v-if="selectedItem._id" @click="deleteItem" class="weui-btn weui-btn_mini weui-btn_warn">删除</button>
  </div>
  <div class="weui-cells__title">
    <span v-if="selectedItem.type=='red'">红包余额 {{client.red_money || 0}}元，可发放
      {{Math.floor((client.red_money||0)/selectedItem.red_money)}}个</span>
  </div>
  <div class="weui-cells">
    <div class="weui-cell weui-cell_active"
      v-bind:class="{'weui-cell_select': !selectedItem._id, 'weui-cell_select-after': !selectedItem._id }">
      <div class="weui-cell__hd">
        <label class="weui-label">奖励类型</label>
      </div>
      <div class="weui-cell__bd">
        <div v-if="selectedItem._id">{{{"red":'红包',real:'普通商品', code: '兑换码', daodian: '到店领取' }[selectedItem.type]}}
        </div>
        <select class="weui-select" v-else v-model="selectedItem.type">
          <option value="red">红包</option>
          <option value="real">普通商品</option>
          <option value="code">兑换码</option>
          <option value="daodian">到店领取</option>
        </select>
      </div>
    </div>

    <div class="weui-cell" v-if="selectedItem.type=='red'">
      <div class="weui-cell__hd">
        <label class="weui-label">红包金额</label>
      </div>
      <div class="weui-cell__bd weui-flex">
        <input class="weui-input" type="number" style="width: 60px" v-model="selectedItem.red_money" />
        <div>&nbsp;至&nbsp;</div>

        <input class="weui-input" type="number" v-model="selectedItem.red_money2" placeholder="固定金额留空" />
        <div>元</div>
      </div>
    </div>

    <div class="weui-cell"
      v-if="selectedItem.type=='real' || selectedItem.type=='code' || selectedItem.type=='daodian' ">
      <div class="weui-cell__hd">
        <label class="weui-label">商品图</label>
      </div>
      <div class="weui-cell__bd">
        <div class="relative">
          <img v-if="selectedItem.photo" v-bind:src="selectedItem.photo" style="width: 50px; height: 50px" />
          <img v-else src="/img/plus.png" style="width: 50px; height: 50px" />
          <input type="file" style="width: 50px; height: 50px; z-index: 2; opacity: 0" class="absolute top-0 left-0"
            @change="uploadFile" id="selected-upload-photo" name="" />
        </div>
      </div>
    </div>

    <div class="weui-cell" v-if="selectedItem.type=='real' || selectedItem.type=='daodian'">
      <div class="weui-cell__bd">
        <input class="weui-input" v-model="selectedItem.name" placeholder="请输入奖品名称" />
      </div>
    </div>

    <div class="weui-cell" v-if="selectedItem.type=='real' || selectedItem.type=='daodian' ">
      <div class="weui-cell__bd">
        <textarea class="weui-textarea" v-model="selectedItem.real_desc" placeholder="请简单描述一下奖品"></textarea>
      </div>
    </div>

    <div class="weui-cell" v-if="selectedItem.type=='code'">
      <div class="weui-cell__bd">
        <input class="weui-input" v-model="selectedItem.name" placeholder="请输入奖品名称" />
      </div>
    </div>

    <div class="weui-cell" v-if="selectedItem.type=='code'">
      <div class="weui-cell__bd">
        <textarea class="weui-textarea" v-model="selectedItem.code_desc" placeholder="兑换码兑换步骤说明"></textarea>
      </div>
    </div>

    <div class="weui-cell" v-if="selectedItem.type != 'code'">
      <div class="weui-cell__hd">
        <label class="weui-label">发放数量</label>
      </div>
      <div class="weui-cell__bd">
        <input class="weui-input" type="number" v-model="selectedItem.stock" />
      </div>
    </div>

    <div class="weui-cell">
      <div class="weui-cell__hd">
        <label class="weui-label">所需积分</label>
      </div>
      <div class="weui-cell__bd">
        <input class="weui-input" type="number" v-model="selectedItem.point" />
      </div>
    </div>


    <div class="weui-cell">
      <div class="weui-cell__hd">
        <label class="weui-label">排序权重(越大越靠前)</label>
      </div>
      <div class="weui-cell__bd">
        <input class="weui-input" type="number" v-model="selectedItem.priority" />
      </div>
    </div>

    <div class="weui-cell">
      <div class="weui-cell__hd">
        <label class="weui-label">上下架</label>
      </div>
      <div class="weui-cell__bd">
        <select class="weui-select" v-model="selectedItem.disabled">
          <option value=0>上架</option>
          <option value=1>下架</option>
        </select>
      </div>
    </div>



    <div class="weui-cell weui-cell_select weui-cell_select-after" v-if="selectedItem.type=='real'">
      <div class="weui-cell__hd">
        <label class="weui-label">发放方式</label>
      </div>
      <div class="weui-cell__bd">
        <select class="weui-select" v-model="selectedItem.getway" v-if="selectedItem.type=='real'">
          <option value="qrcode">联系客服</option>
          <option value="post">快递邮寄</option>
        </select>
      </div>
    </div>

    <div class="weui-cell" v-if="selectedItem.type=='real' && selectedItem.getway=='qrcode'">
      <div class="weui-cell__hd">
        <label class="weui-label">客服二维码</label>
      </div>
      <div class="weui-cell__bd">
        <div class="relative">
          <img v-if="selectedItem.qrcode" v-bind:src="selectedItem.qrcode" style="width: 50px; height: 50px" />
          <img v-else src="/img/plus.png" style="width: 50px; height: 50px" />
          <input type="file" style="width: 50px; height: 50px; z-index: 2; opacity: 0" class="absolute top-0 left-0"
            @change="uploadQr" id="selected-upload-qr" name="" />
        </div>
      </div>
    </div>

    <div class="weui-cell" v-if="selectedItem.type=='code'">
      <div class="weui-cell__hd">
        <label class="weui-label">入口码[可选]</label>
      </div>
      <div class="weui-cell__bd">
        <div class="relative">
          <img v-if="selectedItem.qrcode" v-bind:src="selectedItem.qrcode" style="width: 50px; height: 50px" />
          <img v-else src="/img/plus.png" style="width: 50px; height: 50px" />
          <input type="file" style="width: 50px; height: 50px; z-index: 2; opacity: 0" class="absolute top-0 left-0"
            @change="uploadQr" id="selected-upload-qr" name="" />
        </div>
      </div>
    </div>

    <div class="weui-cell weui-cell_select weui-cell_select-after">
      <div class="weui-cell__hd">
        <label class="weui-label">兑换限制</label>
      </div>
      <div class="weui-cell__bd">
        <select class="weui-select" v-model="selectedItem.limit">
          <option value="none">不限制</option>
          <option value="once">仅限1次</option>
          <option value="eachday">每日仅限1次</option>
          <option value="eachweek">每周仅限1次</option>
          <option value="eachmonth">每月仅限1次</option>
        </select>
      </div>
    </div>
  </div>

  <div v-if="selectedItem.type == 'code'">
    <div class="weui-cells__title flex items-end">
      <div style="flex: 1">
        兑换码 - 上限500个,现有{{selectedItem.codes?selectedItem.codes.split('\n').length-1:''}}个
      </div>
      <button class="weui-btn weui-btn_mini weui-btn_primary" @click="generateCode">随机生成100个</button>
    </div>
    <div class="weui-cells">
      <div class="weui-cell">
        <div class="weui-cell__bd">
          <textarea rows="6" class="weui-textarea" v-model="selectedItem.codes" placeholder="粘贴到这里, 每行一个兑换码">
          </textarea>
        </div>
      </div>
    </div>
  </div>

  <div class="center my2">
    <button @click="submitItem" class="weui-btn weui-btn_primary">保存</button>
  </div>
</div>
<script>
  new Vue({
    el: "#app",
    data: function () {
      return {
        clientid: "<%=client._id%>",
        itemid: "<%=itemid%>",
        client: {},
        selectedItem: {
          type: "real",
          stock: 9999,
          point: 2,
          limit: "once",
          name: "",
          red_money: 0.3,
          real_type: "1",
          real_desc: "",
          photo: "",
          getway: "qrcode",
          codes: "",
        },
      };
    },
    created: function () {
      this.getClient();
      this.refresh();
    },
    methods: {
      getClient: function () {
        var that = this;
        axios.get("/client/info").then(function (res) {
          that.client = res.data.client;
        });
      },
      refresh: function () {
        let that = this;
        if (this.itemid || this.selectedItem._id) {
          let itemid = this.itemid || this.selectedItem._id;
          axios
            .get("/client/point/item/" + itemid)
            .then(function (res) {
              console.log(res.data);
              that.selectedItem = res.data.item;
            });
        }
      },

      uploadFile: function () {
        let that = this;
        var imgfile = document.getElementById("selected-upload-photo").files[0];
        var options = {
          maxSizeMB: 0.8,
          maxWidthOrHeight: 1000,
        };
        imageCompression(imgfile, options).then(function (compressed) {
          var formData = new FormData();
          formData.append("file", compressed);
          axios.post("/client/upload", formData).then(function (res) {
            weui.toast("上传成功", { duration: 500 });
            setTimeout(function () {
              that.selectedItem.photo = res.data.path;
            }, 600);
          });
        });
      },

      uploadQr: function () {
        let that = this;
        var imgfile = document.getElementById("selected-upload-qr").files[0];
        var options = {
          maxSizeMB: 0.8,
          maxWidthOrHeight: 500,
        };
        imageCompression(imgfile, options).then(function (compressed) {
          var formData = new FormData();
          formData.append("file", compressed);
          axios.post("/client/upload", formData).then(function (res) {
            weui.toast("上传成功", { duration: 500 });
            setTimeout(function () {
              that.$set(that.selectedItem, "qrcode", res.data.path);
            }, 600);
          });
        });
      },

      submitItem: function () {
        let that = this;
        axios.post("/client/point/item", this.selectedItem).then(function (res) {
          if (!res.data.status) {
            return weui.topTips(res.data.msg);
          }
          weui.toast("保存成功", { duration: 500 });
          location.href = "/client/home";
        });
      },
      deleteItem: function () {
        if (confirm("确认删除？")) {
          let that = this;
          axios.post("/client/point/item/delete", this.selectedItem).then(function (res) {
            weui.toast("删除成功", { duration: 500 });
            location.href = "/client/home";
          });
        }
      },
      generateCode: function () {
        let that = this;
        var codes = [];
        var selected = that.selectedItem.codes.split("\n");
        let next = function () {
          let newCode = _.random(100000, 999999);
          if (selected.includes(newCode)) {
            next();
          } else {
            codes.push(newCode);
            if (codes.length <= 100) {
              next();
            } else {
              return;
            }
          }
        };

        next();
        this.selectedItem.codes = this.selectedItem.codes + (this.selectedItem.codes ? "\n" : "") + codes.join("\n");
        console.log(this.selectedItem.codes);
      },
    },
  });
</script>

<script type="text/javascript" src="/js/browser-image-compression.js"></script>